/**
 * TodoList
 */

var todoItem = {
    props :[ 'content', 'index'],
    template : `
        <li>
            <slot></slot>
            <span @click="del" >X</span>
        </li>        
    `,
    methods : {

        del : function(){
            this.$emit("del",this.index)
        }
    }
}


 var app = new Vue({
    el: "#app",
    data : {
        inputValue : "",
        list: [

        ]
    },
    methods : {
        add : function(){
            if(this.inputValue ==""){
                return
            }
            this.list.push(this.inputValue)
            this.inputValue = ""
        },
        del : function(index){
            this.list.splice(index, 1);
        }
    },
    components : {
        "todo-item": todoItem
    }
})